<template>
    <div>
        <table-v2 :data="tableState.data_1" :columns="tableState.columns" />

        <pagination-com @changeSize="changeSize_1" @changeCurrent="changeCurrent_1" :total="tableState.pageaTable_1.total"
            :pageSize="tableState.pageaTable_1.pageSize" :currentPage="tableState.pageaTable_1.currentPage" />
    </div>
    <br>
    <div>
        <table-v2 :data="tableState.data_2" :columns="tableState.columns"/>
        <pagination-com @changeSize="changeSize_2" @changeCurrent="changeCurrent_2" :total="tableState.pageaTable_2.total"
            :pageSize="tableState.pageaTable_2.pageSize" :currentPage="tableState.pageaTable_2.currentPage" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import _ from 'lodash'
import { useTable } from '@/composeAPI/useTable.ts'
import $api from '@/api'
const { state: config, getTableData } = useTable()
const tableColoumns = ref<any>()
const tableState = reactive({
    data_1: [],
    data_2: [],
    columns: [{
        dataKey: 'name',
        key: 'name',
        title: '姓名ss',
        width: 150
    }, {
        dataKey: 'address',
        key: 'address',
        title: '地址ss',
        width: 150
    }, {
        dataKey: 'age',
        key: 'age',
        title: '年龄ss',
        width: 150
    }, {
        dataKey: 'email',
        key: 'email',
        title: '邮箱ss',
        width: 150
    }],
    pageaTable_1: {
        // 当前页数
        currentPage: 1,
        // 每页显示条数
        pageSize: 10,
        // 总条数
        total: 0,
    },
    pageaTable_2: {
        // 当前页数
        currentPage: 1,
        // 每页显示条数
        pageSize: 10,
        // 总条数
        total: 0,
    }
})
const changeSize_1 = (val: any) => {
    tableState.pageaTable_1.pageSize = val
    getTableData_1()
}
const changeSize_2 = (val: any) => {
    tableState.pageaTable_2.pageSize = val
    getTableData_2()
}
const changeCurrent_1 = (val: any) => {
    tableState.pageaTable_1.currentPage = val
    getTableData_1()

}
const changeCurrent_2 = (val: any) => {
    tableState.pageaTable_2.pageSize = val
    getTableData_2()
}
const getTableData_1 = async () => {
    const res = await $api["test"].mockData();
    tableState.pageaTable_1.total = _.cloneDeepWith(res.users).length;
    tableState.data_1 = res.users.slice((tableState.pageaTable_1.currentPage - 1) * tableState.pageaTable_1.pageSize, tableState.pageaTable_1.currentPage * tableState.pageaTable_1.pageSize);
    console.log(tableState.data_1, ' tableState.data')
}
const getTableData_2 = async () => {
    const res = await $api["test"].mockData();
    tableState.pageaTable_2.total = _.cloneDeepWith(res.users).length;
    tableState.data_2 = res.users.slice((tableState.pageaTable_2.currentPage - 1) * tableState.pageaTable_2.pageSize, tableState.pageaTable_2.currentPage * tableState.pageaTable_2.pageSize);
    console.log(tableState.data_2, ' tableState.data')
}
onMounted(async () => {
    getTableData_1()
    getTableData_2()
})

</script>

<style scoped></style>